import capitalize from 'lodash/capitalize';
import map from 'lodash/map';
import size from 'lodash/size';
import { Link, useNavigate } from 'react-router-dom';
import { grey } from 'theme';

import ChatBubbleOutline from '@mui/icons-material/ChatBubbleOutline';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import List from '@mui/material/List';
import ListSubheader from '@mui/material/ListSubheader';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

import {
  ThreadHistory,
  useChatInteract,
  useChatMessages,
  useChatSession
} from '@chainlit/react-client';

import { Translator } from 'components/i18n';

import { DeleteThreadButton } from './DeleteThreadButton';

interface Props {
  threadHistory?: ThreadHistory;
  error?: string;
  fetchThreads: () => void;
  isFetching: boolean;
  isLoadingMore: boolean;
}

const ThreadList = ({
  threadHistory,
  error,
  fetchThreads,
  isFetching,
  isLoadingMore
}: Props) => {
  const { idToResume } = useChatSession();
  const { clear } = useChatInteract();
  const { threadId: currentThreadId } = useChatMessages();
  const navigate = useNavigate();
  if (isFetching || (!threadHistory?.timeGroupedThreads && isLoadingMore)) {
    return (
      <>
        {[1, 2, 3].map((index) => (
          <Box key={`threads-skeleton-${index}`} sx={{ mt: 2 }}>
            <Skeleton width={100} />
            {[1, 2].map((childIndex) => (
              <Stack
                key={`threads-skeleton-${index}-${childIndex}`}
                sx={{
                  py: 2,
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1.5
                }}
              >
                <Skeleton width={30} />
                <Skeleton width={'100%'} />
              </Stack>
            ))}
          </Box>
        ))}
      </>
    );
  }

  if (error) {
    return <Alert severity="error">{(error as any).message}</Alert>;
  }

  if (!threadHistory) {
    return null;
  }

  if (size(threadHistory?.timeGroupedThreads) === 0) {
    return (
      <Alert variant="standard" severity="info">
        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.empty" />
      </Alert>
    );
  }

  const handleDeleteThread = (threadId: string) => {
    if (threadId === idToResume || threadId === currentThreadId) {
      clear();
    }
    if (threadId === threadHistory.currentThreadId) {
      navigate('/');
    }
    fetchThreads();
  };

  return (
    <List
      sx={{
        height: 0,
        bgcolor: 'background.paper',
        '& ul': { padding: 0 }
      }}
      subheader={<li />}
    >
      {map(threadHistory.timeGroupedThreads, (items, index) => {
        return (
          <li key={`section-${index}`}>
            <ul>
              <ListSubheader sx={{ px: 0 }}>
                <Typography
                  sx={{
                    py: 1,
                    color: 'text.secondary',
                    fontWeight: 600,
                    fontSize: '12px',
                    backgroundColor: (theme) => theme.palette.background.paper
                  }}
                >
                  {(() => {
                    if (index === 'Today') {
                      return (
                        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.today" />
                      );
                    } else if (index === 'Yesterday') {
                      return (
                        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.yesterday" />
                      );
                    } else if (index === 'Previous 7 days') {
                      return (
                        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.previous7days" />
                      );
                    } else if (index === 'Previous 30 days') {
                      return (
                        <Translator path="components.organisms.threadHistory.sidebar.ThreadList.previous30days" />
                      );
                    } else {
                      return <>{index}</>;
                    }
                  })()}
                </Typography>
              </ListSubheader>
              {map(items, (thread) => {
                const isResumed =
                  idToResume === thread.id && !threadHistory.currentThreadId;

                const isSelected =
                  isResumed || threadHistory.currentThreadId === thread.id;

                return (
                  <Stack
                    component={Link}
                    key={`thread-${thread.id}`}
                    id={`thread-${thread.id}`}
                    sx={(theme) => ({
                      textDecoration: 'none',
                      cursor: 'pointer',
                      p: 1.5,
                      mb: 0.5,
                      gap: 0.5,
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      borderRadius: 1,
                      backgroundColor: isSelected
                        ? theme.palette.mode === 'dark'
                          ? grey[800]
                          : 'grey.200'
                        : theme.palette.background.paper,
                      '&:hover': {
                        backgroundColor:
                          theme.palette.mode === 'dark' ? grey[800] : 'grey.200'
                      }
                    })}
                    to={isResumed ? '' : `/thread/${thread.id}`}
                  >
                    <Stack
                      direction="row"
                      width="100%"
                      justifyContent="space-between"
                    >
                      <Stack
                        sx={{
                          alignItems: 'center',
                          flexDirection: 'row',
                          gap: 1.5,
                          overflow: 'hidden',
                          color: (theme) => theme.palette.text.primary
                        }}
                      >
                        <ChatBubbleOutline
                          sx={{
                            width: '14px',
                            height: '14px'
                          }}
                        />
                        <Typography
                          sx={{
                            fontWeight: 500,
                            fontSize: '13px',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis'
                          }}
                        >
                          {capitalize(thread.name || 'Unknown')}
                        </Typography>
                      </Stack>
                      {isSelected ? (
                        <DeleteThreadButton
                          threadId={thread.id}
                          onDelete={() => handleDeleteThread(thread.id)}
                        />
                      ) : null}
                    </Stack>
                  </Stack>
                );
              })}
            </ul>
          </li>
        );
      })}
      <Stack alignItems={'center'}>
        <CircularProgress
          id={'chat-history-loader'}
          size={30}
          sx={{ my: 1, opacity: isLoadingMore ? 1 : 0 }}
        />
      </Stack>
    </List>
  );
};

export { ThreadList };
